<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>class和style绑定</title>
</head>
<body>
     <div id="app">
         <!-- 绑定class对象语法 -->
        <a href="" v-bind:class="{active:isactive, 'text-danger': hasError }">这是一个链接</a>
        <a href="" v-bind:class="classobj">这是第二个链接</a>
        <!-- 绑定class数组语法 -->
        <a href="" :class="[activeClass, errorClass]">这是第三个链接</a>
        <!-- 绑定内联样式对象语法 -->
        <p :style="{color:activeColor,fontSize:fontSize + 'px'}">这是第三句话</p>
        <!-- 绑定内联样式直接绑定一个对象 -->
        <p :style="styleobj">这是第四句话</p>
        <!-- 绑定内联样式数组语法 -->
        <p :style="[baseStyles, overridingStyles]">这是第5句话</p>
     </div>
   


    <script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            isactive:true,
            hasError:false,
            activeClass:'active',
            errorClass:'text-danger',
            classobj:{
                active: true,
                'text-danger': false

            },
            //绑定内联样式对象语法
            activeColor:'red',
            fontSize:30,
            //绑定内联样式直接绑定一个对象
            styleobj:{
                color:'red',
                fontSize:'13px'
            }
        },
   
    })

    </script>
    
</body>
</html>